import { useRef } from "react";
import { Button, Card, message, Popconfirm, Table } from "antd";
import { CouresEnum, CouresLabelMap } from "@/enums/school/course.enum";
import { exportClassListApi, removeClassApi } from "@/api/school/class";
import EditDrawerCard from "./EditDrawerCard";
import EditModalCard from "../../Course/components/EditModalCard";
import { getGradeAndClassLabel } from "../../common";
import type { TableProps } from "antd";
import type { TabelCardPropsType, TableDataType } from "../types/tableCard.type";
import type { DrawerRefType } from "../types/editDrawerCard.type";
import type { ModalRefType } from "../../Course/types/editModalCard.type";

const TableCard = (props: TabelCardPropsType) => {
  const drawerRef = useRef<DrawerRefType>(null);
  const modalRef = useRef<ModalRefType>(null);
  const [messageApi, contextHolder] = message.useMessage();
  const columns: TableProps<TableDataType>["columns"] = [
    {
      title: "班级",
      fixed: "left",
      render: (_, { gradeAndClass }) => {
        return getGradeAndClassLabel(gradeAndClass);
      },
    },
    {
      title: "文理科",
      fixed: "left",
      render: (_, { subject }) => {
        const stateMap = { 0: "未分科", 1: "文科", 2: "理科" };
        return stateMap[subject];
      },
    },
    { title: "班主任", dataIndex: "classTeacher" },
    { title: `${CouresLabelMap[CouresEnum.Chinese]}老师`, dataIndex: `${CouresEnum.Chinese}Teacher` },
    { title: `${CouresLabelMap[CouresEnum.Math]}老师`, dataIndex: `${CouresEnum.Math}Teacher` },
    { title: `${CouresLabelMap[CouresEnum.English]}老师`, dataIndex: `${CouresEnum.English}Teacher` },
    { title: `${CouresLabelMap[CouresEnum.Politics]}老师`, dataIndex: `${CouresEnum.Politics}Teacher` },
    { title: `${CouresLabelMap[CouresEnum.History]}老师`, dataIndex: `${CouresEnum.History}Teacher` },
    { title: `${CouresLabelMap[CouresEnum.Geography]}老师`, dataIndex: `${CouresEnum.Geography}Teacher` },
    { title: `${CouresLabelMap[CouresEnum.Physics]}老师`, dataIndex: `${CouresEnum.Physics}Teacher` },
    { title: `${CouresLabelMap[CouresEnum.Chemistry]}老师`, dataIndex: `${CouresEnum.Chemistry}Teacher` },
    { title: `${CouresLabelMap[CouresEnum.Biology]}老师`, dataIndex: `${CouresEnum.Biology}Teacher` },
    {
      title: `${CouresLabelMap[CouresEnum.PhysicalEducation]}老师`,
      dataIndex: `${CouresEnum.PhysicalEducation}Teacher`,
    },
    { title: `${CouresLabelMap[CouresEnum.Music]}老师`, dataIndex: `${CouresEnum.Music}Teacher` },
    { title: `${CouresLabelMap[CouresEnum.Computer]}老师`, dataIndex: `${CouresEnum.Computer}Teacher` },
    {
      title: "操作",
      key: "action",
      fixed: "right",
      width: 140,
      render: record => (
        <>
          <Button type="link" className="p-0" onClick={() => onCourseArrangement(record)}>
            课程安排
          </Button>
          <Button type="link" className="p-0 ml-8" onClick={() => onUpdate(record)}>
            编辑
          </Button>
          <Popconfirm
            title="提示"
            description="请确认是否删除当前数据?"
            onConfirm={() => onRemove(record.id)}
            okText="Yes"
            cancelText="No"
          >
            <Button type="link" className="p-0">
              删除
            </Button>
          </Popconfirm>
        </>
      ),
    },
  ];

  const onOpen = () => {
    drawerRef.current?.onOpen();
  };
  const onClose = () => {
    props.onReset();
  };
  const onUpdate = (record: TableDataType) => {
    drawerRef.current?.onOpen(record);
  };
  const onRemove = async (id: number) => {
    await removeClassApi(id);
    messageApi.success("删除成功");
    setTimeout(() => {
      props.onReset();
    }, 500);
  };
  const onExport = async () => {
    const { data } = await exportClassListApi<{ data: Buffer }>();
    const uint8Array = new Uint8Array(data.data);
    const blob = new Blob([uint8Array], { type: "application/octet-stream" });
    const a = document.createElement("a");
    const blobUrl = URL.createObjectURL(blob);
    a.href = blobUrl;
    a.download = `班级表_${+new Date()}.xlsx`;
    a.click();
    window.URL.revokeObjectURL(blobUrl);
  };
  // * 课程安排
  const onCourseArrangement = (record: TableDataType) => {
    modalRef.current?.onOpen(record);
  };

  return (
    <Card className="mt-16">
      {contextHolder}
      <div>
        <Button type="primary" onClick={onOpen}>
          新增
        </Button>
        <Button className="ml-8" onClick={onExport}>
          导出
        </Button>
      </div>
      <Table
        columns={columns}
        dataSource={props.tabelData}
        rowKey="id"
        scroll={{ x: 1700 }}
        className="mt-8"
        {...props.tableProps}
      />
      {/* 新增编辑 */}
      <EditDrawerCard ref={drawerRef} onClose={onClose} />
      {/* 课程安排 */}
      <EditModalCard ref={modalRef} />
    </Card>
  );
};
export default TableCard;
